<template>
    <div>
        <!-- 以下画线为前缀的 Vue 文件就是动态路由，然后在文件里边有 $route.params.id 来接收参数。 -->
        <span>newsId: {{ $route.params.id }}</span>
        <span>title: {{ $route.params.title }}</span>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>

        <h2>新闻列表页面</h2>
        <nuxt-link v-for="(item, index) in newsList" :key="index" :to=" '/news/' + item.id ">
            <div>{{item.title}}</div>
        </nuxt-link>
        <!-- 接收参数 -->
    </div>
</template>

<script>
export default {
    // 设置特定页面的效果
  transition:'test',
  //独立设置head信息
  head(){
      return{
        title: this.$route.params.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    },
     // 请求数据，该方法会运行在服务器端
  async asyncData(){
    let data = await new Promise((resolve) => {
        setTimeout(() => {
            console.log('settimeout 2000 done')
            resolve([
                {id: 1, title: 11},
                {id: 2, title: 22},
                {id: 3, title: 33},
            ])
        }, 2000)
    })
    console.log(data[0], data.length)
    return {
      newsList: data
    }
  }
}
</script>